<script setup>
import langSubVue from './lang-sub.vue';

const { t, locale } = useI18n();
const { proxy } = getCurrentInstance();
const langs = ['zh-CN', 'zh-TW', 'en', 'ja'];
const toggleLocales = () => {
  const theLang = locale.value;
  const lang = langs[(langs.indexOf(theLang) + 1) % langs.length];
  proxy.setLang(lang);
};

const count = ref(0);
</script>

<template>
  <div style="text-align: center; margin-top: 10%">
    <h1>{{ $t('language') }}</h1>
    {{ $t('hello') }}, {{ t('hello-parent') }}
    <langSubVue />
    <!-- 当语种含有HTML元素时，使用i18n插槽方式展现 -->
    <i18n-t keypath="tips" tag="p" class="@apply lg:text-center mt-4 max-w-2xl text-base text-gray-500 lg:mx-auto">
      <template #dom><strong>Strong</strong></template>
    </i18n-t>

    <button class="icon-btn mx-2" @click="toggleLocales"><icon-svg-carbon-language /></button>
    <button type="button" @click="count++">count is: {{ count }}</button>
  </div>
</template>

<i18n global>
{
  "en": {
    "language": "英语",
    "hello-parent": "I am the parent language!",
    "tips": "This is a {dom} demo."
  },
  "zh-CN": {
    "language": "中文简体",
    "hello-parent": "我是父层语言！",
    "tips": "这是一个 {dom} 测试."
  },
  "zh-TW": {
    "language": "中文繁体",
    "hello-parent": "我是父層語言！",
    "tips": "這是一個 {dom} 測試."
  },
  "ja": {
    "language": "日语",
    "hello-parent": "私は親の言語です！",
    "tips": "これは{dom}テストです。"
  }
}
</i18n>
